import React from "react";
// import G6Editor from "@antv/g6-editor";
const G6Editor = require('../../../g6-editor/src')
import Zcon from '@cbd/icon';
import { itempannelMenu } from '../flowConfig';
import styles from './index.less';

const getPrefixCom = (type, prefixValue) => {
  let componet = null;
  switch (type) {
    case 'iconfont':
      componet = <i className={prefixValue} />;
      break;
    case 'Zcon':
      componet = <Zcon type={prefixValue} />;
      break;
    default:
      break;
  }
  return componet;
}

class Itempanel extends React.Component {
  constructor() {
    super();
    this.addGroup = this.addGroup.bind(this);
  }
  componentDidMount() {
    const { editor } = this.props;
    const createItempanel = this.getCreateItempanel();
    const itempanel = createItempanel(this.itempanelContainer);
    editor.add(itempanel);
  }

  getCreateItempanel() {
    const { createItempanel } = this.props;
    return createItempanel || this.createItempanel;
  }

  addGroup() {
    const { editor } = this.props;
    const page = editor.getCurrentPage();
    page.addGroup({
      id: 'dfsfsdf',
    });
  }

  // eslint-disable-next-line
  createItempanel(container) {
    return new G6Editor.Itempannel({
      container,
    });
  }

  render() {
    const { className = '' } = this.props;
    return (
      <div
        className={`itempannel ${styles.flowchart_itempannel} ${className}`}
        ref={el => {
          this.itempanelContainer = el;
        }}
      >
        {itempannelMenu.map(item => {
          const { children = [] } = item;
          return (
            <div key={item.key} className={`${styles.list_item}`}>
              <span className={styles.item_title}>{item.label}</span>
              <div className={styles.list__box}>
                {children.map && children.map(subItem => {
                  return (
                    <div
                      key={subItem.key}
                      className={`getItem ${styles.item}`}
                      data-shape={subItem.datashape}
                      data-type={subItem.datatype}
                      data-size={subItem.datasize}
                      data-label={subItem.label}
                      data-color={subItem.datacolor}
                      data-command={subItem.datacommand}
                    >
                      <div className={styles.item_con}>
                        {getPrefixCom(subItem.prefixType, subItem.prefixValue)}
                        <p>{subItem.label}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Itempanel;
